<template>
  <div class="layout-container" :class="{'old': elder}">
    <div class="layout-section">
      <top-header :show-elder="true" :auth-check="true" @setElder="setElderByChild"></top-header>

      <div class="home-tabs">
        <ul class="home-tabs-header">
          <li class="home-tab-title" :class="{'active':  homeTab === 0}" @click="homeTab = 0">
            <img src="@/assets/APP-1.png" alt="">
            <span>基本信息</span>
          </li>
          <li class="home-tab-title" :class="{'active':  homeTab === 1}" @click="homeTab = 1">
            <img src="@/assets/APP-2.png" alt="">
            <span>变更信息</span>
          </li>
          <li class="home-tab-title" :class="{'active':  homeTab === 2}" @click="homeTab = 2">
            <img src="@/assets/APP-3.png" alt="">
            <span>内档资料</span>
          </li>
        </ul>
        <div class="home-tabs-body">
          <div class="home-tab-body active" v-show="homeTab === 0">
            <el-autocomplete
                class="layout-tab-search eraq-ent-inputer"
                v-model="entName.base"
                :fetch-suggestions="queryNames"
                placeholder="请输入企业名称"
                :trigger-on-focus="false"
                @select=""
            ></el-autocomplete>
            <button name="btnOk" label="确认" @click="doSave('0')"></button>
          </div>
          <div class="home-tab-body" v-show="homeTab === 1">
            <el-autocomplete class="layout-tab-search eraq-ent-inputer" v-model="entName.change"
                             :fetch-suggestions="queryNames" placeholder="请输入企业名称" :trigger-on-focus="false"
                             @select=""/>
            <button name="btnOk" label="确认" @click="doSave('1')"></button>
          </div>
          <div class="home-tab-body" v-show="homeTab === 2">
            <ul class="home-tab-list">
              <li class="home-tab-list__item" @click="$router.push({path: '/company'})">
                <img src="@/assets/datai1.png" alt="">
                <span>我是企业</span>
              </li>
              <li class="home-tab-list__item" @click="$router.push({path: '/courts'})">
                <img src="@/assets/datai2.png" alt="">
                <span>我是公检法</span>
              </li>
              <li class="home-tab-list__item" @click="$router.push({path: '/lawer'})">
                <img src="@/assets/datai3.png" alt="">
                <span>我是律师</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="home-que-tit">常见问题</div>
      <question></question>

      <footer-right></footer-right>
    </div>

    <footer-nav :active-index="0"></footer-nav>
  </div>
</template>

<script>
import footerNav from "@/components/footerNav";
import footerRight from "@/components/footerRight";
import question from "@/components/question";
import TopHeader from "@/components/topHeader";
import {apiSaveBase, apiSaveChange, apiReqEntNames} from "@/api/apply";
import {ajaxUtils, strUtils} from "@/utils/lwUtils";
import {apiGetUser} from "@/api/user";

export default {
  data() {
    return {
      homeTab: 0,
      elder: false,
      entName: {
        base: "", change: "",
      },
      escapeTime: {
        t1: 0, t2: 0,
      },
    }
  },
  components: {TopHeader, footerNav, footerRight, question,},
  created() {
    this.escapeTime.t1 = new Date().getTime();
  },
  mounted() {
    this.escapeTime.t2 = (new Date().getTime() - this.escapeTime.t1) / 1000;

    //埋点
    this.setAplus();
  },
  methods: {
    //子组件调用方法，设置老年模式
    setElderByChild: function (elder) {
      this.elder = elder;
    },
    queryNames: function (queryString, cb) {
      apiReqEntNames(queryString, cb);
    },
    doSave: function (infoType) {
      if ((infoType === "0" && this.entName.base === "") || (infoType === "1" && this.entName.change === "")) {
        this.$eraqDlg.warning("请输入企业名称");
        return;
      }
      let savePromise = infoType === "1" ? apiSaveChange(this.entName.change) : apiSaveBase(this.entName.base);
      savePromise.then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }
        if (res.data.handlestate === "办结") {
          this.$router.push({path: "/showBase", query: {type: res.data.infotype, unid: res.data.unid}});
        } else {
          this.$router.push({path: "/list"});
        }
      }).catch(err => {
        this.$eraqDlg.error("数据保存异常：" + err.body.message);
      });
    },

    //添加埋点信息
    setAplus: function () {
      //页面加载时间
      let t1 = this.escapeTime.t1, t2 = this.escapeTime.t2;

      let zwlog;
      apiGetUser().then(res => {
        let isLogin = !strUtils.isEmpty(res.code, res.msg);
        if (!isLogin) {
          console.log("当前未登录，埋点信息不加入用户信息");
        } else {
          console.log("当前已登录，埋点信息加入用户信息(" + res.data.userId + "/" + res.data.userName + ")");
        }

        zwlog = new ZwLog({miniAppId: "2001700221", miniAppName: '台州市企业登记档案查询'});
        zwlog.onReady(function () {
          zwlog.sendPV({
            miniAppId: "2001700221",
            miniAppName: '台州市企业登记档案查询',
            log_status: isLogin ? "02" : "01",  //01:未登录/02:单点登录
            t2: ((new Date().getTime() - t1) / 1000) + "s", //'页面启动到加载完成的时间',
            t0: t2 + "s",  //'页面启动到页面响应完成的时间',
            pageId: 'eraq-zlb',
            pageName: '台州市企业登记档案查询',
            _user_id: isLogin ? res.data.userId : '',
            _user_nick: isLogin ? res.data.userName : "",
          });
          zwlog.record('yourTrackerEventCode', 'CLK', {
            Test1: "test params via helh",
          });
          let { metaInfo } = zwlog; // SDK元配置的当前设置
        });
      }).catch(() => {
        console.log("获取用户信息错误，埋点失败");
      });
    },
  },
}
</script>

<style lang='scss' scoped>
@import "src/css/home";

.eraq-ent-inputer {
  width: 100%;
  margin: 20px 0 20px 0;
}
</style>
